<template>
	<cl-dialog
		title="配置营业老师"
		width="400px"
		:visible.sync="visible"
		@close="close"
		:props="{
			beforeClose: beforeClose,
			appendToBody: true,
			closeOnClickModal: false
		}"
	>
		<el-form ref="form" label-position="top" :model="form" :rules="rules" :disabled="saving">
			<el-form-item label="营业时间" prop="date">
				<cl-date-picker
					v-model="form.date"
					value-format="yyyy-MM-dd"
					style="width:100%"
					:clearable="false"
					placeholder="请选择营业时间"
				/>
			</el-form-item>
			<el-form-item label="门店老师数" prop="business_num">
				<el-input v-model.number="form.business_num" placeholder="请填写数量" />
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="close">关闭</el-button>
			<el-button type="primary" :loading="saving" @click="submit">确定</el-button>
		</template>
	</cl-dialog>
</template>
<script>
export default {
	data() {
		return {
			visible: false,
			saving: false,
			form: {
				shop_id: "",
				date: "",
				business_num: 0
			},
			rules: {
				date: [{ required: true, message: "请选择营业时间" }],
				business_num: [{ required: true, message: "请填写门店老师数" }]
			}
		};
	},
	methods: {
		open(data = {}) {
			this.visible = true;
			this.form = { ...data };
			// console.log(this.form);
		},
		close() {
			this.visible = false;
		},
		beforeClose(done) {
			!this.saving && done();
			this.$refs.form.resetFields();
		},
		submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				this.saving = true;
				await this.$service.shop.businessTeacher(this.form).done(() => {
					this.saving = false;
				});
				this.$message.success("操作成功");
				this.$emit("confirm");
				this.close();
			});
		}
	}
};
</script>
